<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="">
        *{
            margin: 0;
            padding: 0;
        }
        /*各部分的位置*/
        .main{
            width: 1000px;
            margin: 0 auto;
        }
        .clearfix::after{
            content: '';
            clear: both;
            display: block;
        }
        .nav{
            height: 50px;
        }
        .nav .logo{
            float: left;
            width: 100px;
            height: 50px;
        }
        .nav .navls{
            float: right;
            width: 600px;
            height: 50px;
        }
        .banner{
            width: 100%;
            height: 270px;
            margin: 0 auto; 
            object-fit: cover;
        }
        .art .item{
            height: 200px;
            border-bottom: 1px solid gray;
        }
        .care{
            height: 150px;
        }
        .ad{
            height: 120px;
            width: 100%;
        }
        .news{
            height: 250px;
            width: 100%;
            margin-top: 20px;
        }
        .tag{
            width: 100%;
            height: 120px;
            margin-top: 20px;
        }
        .rem{
            height: 250px;
            margin-top: 20px;
        }
        .ad2{
            height: 250px;
        }
        /*左边部分*/
        .left{
            float: left;
            width: 67%;
            height: 600px;
        }
        /* 导航栏*/
        .navls{
            width: 600px;
            height: 50px;
            background: #48ad15;
            border-radius: 25px;
            line-height: 50px;
            margin-left: 20px;
        }
        .aa{
            text-decoration: none;
            color: white;
            margin-left: 20px;
            padding: 15px 18px;
        }
        .aa:hover{
            color: black;
            background: white;
        }
        .first{
            color: black;
            background: yellow;
            margin-left: 40px;
        }
        .banner{
            padding-top: 5px;
        }
        /*文章区域*/
        .arttie{
            font-size: 16px;
            padding: 13px 0 5px;
            margin-bottom: 5px;
            border-bottom: 3px solid #D46A4A;
        }
        .lm{
            padding: 5px;
            font-size: 200;
            float: right;
            font-size: 12px;
            color: #ababab;
        }
        .p1{
            float: left;
            margin: 15px 5px 15px 0;
            padding: 10px;
            width: 168px;
        }
        .WORD{
            float: right;
            width: 480px;
            margin: -176px 0px;
            padding: 10px 0px;
        }
        .word{
            margin-top: 10px;
            color: #474645;
            text-decoration: none;
            font-weight: bold;
            font-size: 16px;
            line-height: 33px;
        }
        .word:hover{
            color: #48ad15;
            text-decoration: underline;
        }
        .tie{
            text-decoration: none;
            color: #759b08;
            font-size: 12px;
        }
        .time{
            font-size: 12px;
            color: #756F71;
        }
        .word1{
            font-size: 12px;
            color: #756F71;
            line-height: 22px;
            margin: 5px;
        }
        .r1{
            float: right;
            img{
                width: 20px;
                height: 20px;
            }
        }
        /* 右边部分*/
        .right{
            float: right;
            width: 30%;
            height: 600px;
        }
        /* 新浪微博*/
        .gz{
            margin-top: 10px;
            font-weight: 400;
            padding: 8px;
            border-bottom:1px solid #ababab;
        }
        .xl1{
            display: inline-block;
            padding-top: 30px;
            font-size: 12px;
            width: 70px;
            text-align: center;
            text-decoration: none;
        }
        .xl{
            color: #7f7f7f;
        }
        .img{
            background: url(../../小黑子/ico_05_1.jpg) ;
            background-size: 100% 100%;
            width: 55px;
            height: 50px;
            float: left;            
/*            padding-top: 20px;*/
            margin:20px 10px 0px 10px ;
        }
        .img:hover{
            background: url(../../小黑子/ico_05.png);
        }
        /* 广告 外边距*/
        .ad{
            margin-top: 20px;
        }
        /* 新闻标题*/
        .tick{
            background: #F77825;
            padding: 8px 10px;
            text-decoration: none;
            color: white;
            font-size: 14px;
        }
        .tick1{
            padding: 8px 10px;
            text-decoration: none;
            color: #333333;
            font-size: 14px;
        }
        .tick1:hover{
            background: #F77825;
            color: white;
        }
         /* 新闻内容*/
        li{
            padding: 10px 0;
            border-bottom: 1px solid #ccc;
            font-size: 14px;
            list-style: none;
        }
        .new1{
            padding-top: 11px;
        }
        .newtie{
            float: left;
            margin-top: 22px;
        }
        li a{
            display: inline-block;
            padding-left: 5px;
            text-decoration: none;
            color: black;
        }
        li:hover{
            border-bottom: 1px solid black;
        }
        /* 标签云 */
        .bqy{
            font-weight: 400;
            padding: 35px 8px 8px 0;
            border-bottom:1px solid #ababab;
        }
        .navbox{
            margin: 20px 0 30px;
        }
        .navbox a{
            text-decoration: none;
            padding: 5px 7px;
            font-size: 12px;
            color: #fff;
            background: #036564;
            margin: 5px 3px;
            display: inline-block;
            border-radius: 5px;
        }
        .navbox .web{
            background: #F77825;
        }
        /* 图文推荐*/
        .twtj{
            font-weight: 400;
            padding: 8px 8px 8px 0;
            border-bottom:1px solid #ababab;
        }
        .sma{
            width: 70px;
            float: left;
        }
        .twt{
            display: block;
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;
        }
        .twt:hover{
            background: #D9D9D9;
        }
        .twt a{
            display: block;
            font-size: 14px;
            text-decoration: none;
            color: #666;
        }
        .twt a:hover{
            color: red;
        }
        .twt1{
            margin-top: 30px;
        }
        /* 广告 */
        .ad2 img{
            width: 300px;
            margin-top: 30px;
        }
        /* 友情链接*/
        .friend{
            font-size: 400;
            padding: 8px;
            border-bottom:1px solid #ababab;
        }
        .friend a{
            font-size: 12px;
            color: #7f8b97;
            font-weight: 400;
            padding-top: 5px;
            float: right;
        }
        .fl1 a{
            padding: 5px 8px;
            font-size: 12px;
            padding: 8px 5px;
            color: #999;
            display: inline-block;
            text-decoration: none;
        }
        .fl1{
            padding: 8px 5px;
            margin-top: 30px;
            border: 1px solid #ababab;
        }
        .fri{
            font-size: 600;
        }
    </style>
</head> 
<body>
    <div class="main">
        <!--导航开始  -->
        <div class="nav clearfix">
            <div class="logo"><img src="../../小黑子/6.png" alt=""></div>
            <div class="navls">
                <div class="a1">
                <a href="" class="first aa">首页</a>
                <a href="" class="aa">关于我</a>
                <a href="" class="aa">文章</a>
                <a href="" class="aa">心情</a>
                <a href="" class="aa">相册</a>
                <a href="" class="aa">留言</a>
                </div>
            </div>
        </div>
        <!-- 内容区域 -->
        <div class="con">
            <!-- 左边 -->
            <div class="left">
                <!-- 轮播图开始 -->
                 <div class="banner">
                    <img src="../../小黑子/a2.jpg" alt="" class="banner">
                 </div>
                 <!-- 文章开始 -->
                  <div class="art">
                    <h3 class="arttie">文章标题
                        <span class="lm">
                        <span>栏目标题</span>
                        <span>栏目标题</span>
                        <span>栏目标题</span>
                    </span>
                    </h3>
                    <!-- 文章列表区域 -->
                    <div class="list"></div>
                       <div class="item clearfix">
                         <img src="../../小黑子/01.jpg" alt="" class="p1">
                         <div class="WORD clearfix">
                         <a href="" class="word">住在手机里的朋友</a>
                         <p class="word1">
							通信时代，无论是初次相见还是老友重逢，交换联系方式，常常是彼此交换名片，然后郑重或是出于礼貌用手机记下对方的电话号码。在快节奏的生活里，我们不知不觉中就成为住在别人手机里的朋友。又因某些意外，变成了别人手机里匆忙的过客，这种快餐式的友谊 ...
                         </p>
                         <span class="l1">
                            <img src="../../小黑子/newsbg01.png" alt="">
                            <a href="" class="tie">个人标签</a>
                            <img src="../../小黑子/newsbg02.png" alt="">
                            <span class="time">2014-02-19</span>
                         </span>
                         <span class="r1">
                           <img src="../../小黑子/11.png" alt="">
                           <span class="time">评论</span>
                           <a href="" class="tie">(30)</a>
                           <img src="../../小黑子/12.png" alt="">
                           <span class="time">浏览</span>
                           <a href="" class="tie">(449)</a>
                         </span>
                        </div>
                       </div>
                       <div class="item clearfix">
                        <img src="../../小黑子/01.jpg" alt="" class="p1">
                        <div class="WORD clearfix">
                        <a href="" class="word">住在手机里的朋友</a>
                        <p class="word1">
                           通信时代，无论是初次相见还是老友重逢，交换联系方式，常常是彼此交换名片，然后郑重或是出于礼貌用手机记下对方的电话号码。在快节奏的生活里，我们不知不觉中就成为住在别人手机里的朋友。又因某些意外，变成了别人手机里匆忙的过客，这种快餐式的友谊 ...
                        </p>
                        <span class="l1">
                            <img src="../../小黑子/newsbg01.png" alt="">
                            <a href="" class="tie">个人标签</a>
                            <img src="../../小黑子/newsbg02.png" alt="">
                            <span class="time">2014-02-19</span>
                         </span>
                         <span class="r1">
                           <img src="../../小黑子/11.png" alt="">
                           <span class="time">评论</span>
                           <a href="" class="tie">(30)</a>
                           <img src="../../小黑子/12.png" alt="">
                           <span class="time">浏览</span>
                           <a href="" class="tie">(449)</a>
                         </span>
                       </div>
                      </div>
                      <div class="item clearfix">
                        <img src="../../小黑子/01.jpg" alt="" class="p1">
                        <div class="WORD clearfix">
                        <a href="" class="word">住在手机里的朋友</a>
                        <p class="word1">
                           通信时代，无论是初次相见还是老友重逢，交换联系方式，常常是彼此交换名片，然后郑重或是出于礼貌用手机记下对方的电话号码。在快节奏的生活里，我们不知不觉中就成为住在别人手机里的朋友。又因某些意外，变成了别人手机里匆忙的过客，这种快餐式的友谊 ...
                        </p>
                       <span class="l1">
                            <img src="../../小黑子/newsbg01.png" alt="">
                            <a href="" class="tie">个人标签</a>
                            <img src="../../小黑子/newsbg02.png" alt="">
                            <span class="time">2014-02-19</span>
                         </span>
                         <span class="r1">
                           <img src="../../小黑子/11.png" alt="">
                           <span class="time">评论</span>
                           <a href="" class="tie">(30)</a>
                           <img src="../../小黑子/12.png" alt="">
                           <span class="time">浏览</span>
                           <a href="" class="tie">(449)</a>
                         </span>
                       </div>
                      </div>
                      <div class="item clearfix">
                        <img src="../../小黑子/01.jpg" alt="" class="p1">
                        <div class="WORD clearfix">
                        <a href="" class="word">住在手机里的朋友</a>
                        <p class="word1">
                           通信时代，无论是初次相见还是老友重逢，交换联系方式，常常是彼此交换名片，然后郑重或是出于礼貌用手机记下对方的电话号码。在快节奏的生活里，我们不知不觉中就成为住在别人手机里的朋友。又因某些意外，变成了别人手机里匆忙的过客，这种快餐式的友谊 ...
                        </p>
                        <span class="l1">
                            <img src="../../小黑子/newsbg01.png" alt="">
                            <a href="" class="tie">个人标签</a>
                            <img src="../../小黑子/newsbg02.png" alt="">
                            <span class="time">2014-02-19</span>
                         </span>
                         <span class="r1">
                           <img src="../../小黑子/11.png" alt="">
                           <span class="time">评论</span>
                           <a href="" class="tie">(30)</a>
                           <img src="../../小黑子/12.png" alt="">
                           <span class="time">浏览</span>
                           <a href="" class="tie">(449)</a>
                         </span>
                       </div>
                      </div>
                      <div class="item clearfix">
                        <img src="../../小黑子/01.jpg" alt="" class="p1">
                        <div class="WORD clearfix">
                        <a href="" class="word">住在手机里的朋友</a>
                        <p class="word1">
                           通信时代，无论是初次相见还是老友重逢，交换联系方式，常常是彼此交换名片，然后郑重或是出于礼貌用手机记下对方的电话号码。在快节奏的生活里，我们不知不觉中就成为住在别人手机里的朋友。又因某些意外，变成了别人手机里匆忙的过客，这种快餐式的友谊 ...
                        </p>
                        <span class="l1">
                            <img src="../../小黑子/newsbg01.png" alt="">
                            <a href="" class="tie">个人标签</a>
                            <img src="../../小黑子/newsbg02.png" alt="">
                            <span class="time">2014-02-19</span>
                         </span>
                         <span class="r1">
                           <img src="../../小黑子/11.png" alt="">
                           <span class="time">评论</span>
                           <a href="" class="tie">(30)</a>
                           <img src="../../小黑子/12.png" alt="">
                           <span class="time">浏览</span>
                           <a href="" class="tie">(449)</a>
                         </span>
                       </div>
                      </div>
                      <div class="item clearfix">
                        <img src="../../小黑子/01.jpg" alt="" class="p1">
                        <div class="WORD clearfix">
                        <a href="" class="word">住在手机里的朋友</a>
                        <p class="word1">
                           通信时代，无论是初次相见还是老友重逢，交换联系方式，常常是彼此交换名片，然后郑重或是出于礼貌用手机记下对方的电话号码。在快节奏的生活里，我们不知不觉中就成为住在别人手机里的朋友。又因某些意外，变成了别人手机里匆忙的过客，这种快餐式的友谊 ...
                        </p>
                        <span class="l1">
                            <img src="../../小黑子/newsbg01.png" alt="">
                            <a href="" class="tie">个人标签</a>
                            <img src="../../小黑子/newsbg02.png" alt="">
                            <span class="time">2014-02-19</span>
                         </span>
                         <span class="r1">
                           <img src="../../小黑子/11.png" alt="">
                           <span class="time">评论</span>
                           <a href="" class="tie">(30)</a>
                           <img src="../../小黑子/12.png" alt="">
                           <span class="time">浏览</span>
                           <a href="" class="tie">(449)</a>
                         </span>
                       </div>
                      </div>
                      <div class="item clearfix">
                        <img src="../../小黑子/01.jpg" alt="" class="p1">
                        <div class="WORD clearfix">
                        <a href="" class="word">住在手机里的朋友</a>
                        <p class="word1">
                           通信时代，无论是初次相见还是老友重逢，交换联系方式，常常是彼此交换名片，然后郑重或是出于礼貌用手机记下对方的电话号码。在快节奏的生活里，我们不知不觉中就成为住在别人手机里的朋友。又因某些意外，变成了别人手机里匆忙的过客，这种快餐式的友谊 ...
                        </p>
                        <span class="l1">
                            <img src="../../小黑子/newsbg01.png" alt="">
                            <a href="" class="tie">个人标签</a>
                            <img src="../../小黑子/newsbg02.png" alt="">
                            <span class="time">2014-02-19</span>
                         </span>
                         <span class="r1">
                           <img src="../../小黑子/11.png" alt="">
                           <span class="time">评论</span>
                           <a href="" class="tie">(30)</a>
                           <img src="../../小黑子/12.png" alt="">
                           <span class="time">浏览</span>
                           <a href="" class="tie">(449)</a>
                         </span>
                       </div>
                      </div>
                  </div>
            </div>
            <!-- 右边 -->
            <div class="right">
                <!-- 关注我 -->
                <div class="care">
                    <div class="att">
                        <h3 class="gz">关注我</h3>
                        <div class="img">
                                     11111          
                        </div>
                        <div class="img">                         
                        </div>
                        
                        <div class="img">                        
                        </div>
                     
                        <div class="img">                         
                        </div>
                        
                    </div>
                </div>
                <!-- 广告 -->
                <div class="ad">
                    <img src="../../小黑子/a3.jpg" alt="">
                </div>
                <!-- 新闻列表 -->
                <div class="news">
                    <a href="" class="tick">点击排行</a>
                    <a href="" class="tick1">最新文章</a>
                    <a href="" class="tick1">站长推荐</a>
                    <ul>
                        <img src="../../小黑子/ph2.png" alt="" class="newtie">
                        <li>
                            <a href="" class="new1">住在手机里的朋友</a>
                        </li>
                        <li>
                            <a href="">住在手机里的朋友</a>
                        </li>
                        <li>
                            <a href="">住在手机里的朋友</a>
                        </li>
                        <li>
                            <a href="">住在手机里的朋友</a>
                        </li>
                        <li>
                            <a href="">住在手机里的朋友</a>
                        </li>
                        <li>
                            <a href="">住在手机里的朋友</a>
                        </li>
                    </ul>
                </div>
                <!-- 标签云 -->
                <div class="teg">
                    <h3 class="bqy">标签云</h3>
                    <div class="navbox">
                    <a href="">个人博客</a>
                    <a href="" class="web">web开发</a>
                    <a href="">前端设计</a>
                    <a href=""> HTML</a>
                    <a href="">CSS3</a>
                    <a href="">HTML5+CSS3</a>
                    <a href="">百度</a>
                    <a href="">javascript</a>
                    <a href="">个人博客</a>
                    <a href="">web开发</a>
                    <a href="">前端设计</a>
                    <a href="">HTML</a>
                    <a href="">CSS3</a>
                    <a href="">HTML5+CSS3</a>
                    <a href="">百度</a>
                    <a href="">javascript</a>
                    </div>
                </div>
                <!-- 图文推荐 -->
                <div class="rem">
                    <h3 class="twtj">图文推荐</h3>
                    <div class=" twt twt1 clearfix">
                        <img src="../../小黑子/01.jpg" alt="" class="sma">
                        <a href="">住在手机里的朋友</a><br>
                        <img src="../../小黑子/lanmbq.png" alt="">
                        <span class="sma1">个人博客</span>
                        <img src="../../小黑子/datepng.png" alt="">
                        <span class="sma2">2014-02-19</span>
                    </div>
                    <div class=" twt  clearfix">
                        <img src="../../小黑子/01.jpg" alt="" class="sma">
                        <a href="">住在手机里的朋友</a><br>
                        <img src="../../小黑子/lanmbq.png" alt="">
                        <span class="sma1">个人博客</span>
                        <img src="../../小黑子/datepng.png" alt="">
                        <span class="sma2">2014-02-19</span>
                    </div>
                    <div class=" twt  clearfix">
                        <img src="../../小黑子/01.jpg" alt="" class="sma">
                        <a href="">住在手机里的朋友</a><br>
                        <img src="../../小黑子/lanmbq.png" alt="">
                        <span class="sma1">个人博客</span>
                        <img src="../../小黑子/datepng.png" alt="">
                        <span class="sma2">2014-02-19</span>
                    </div>
                    <div class=" twt  clearfix">
                        <img src="../../小黑子/01.jpg" alt="" class="sma">
                        <a href="">住在手机里的朋友</a><br>
                        <img src="../../小黑子/lanmbq.png" alt="">
                        <span class="sma1">个人博客</span>
                        <img src="../../小黑子/datepng.png" alt="">
                        <span class="sma2">2014-02-19</span>
                    </div>
                    <div class=" twt  clearfix">
                        <img src="../../小黑子/01.jpg" alt="" class="sma">
                        <a href="">住在手机里的朋友</a><br>
                        <img src="../../小黑子/lanmbq.png" alt="">
                        <span class="sma1">个人博客</span>
                        <img src="../../小黑子/datepng.png" alt="">
                        <span class="sma2">2014-02-19</span>
                    </div>
                    <div class=" twt twt2 clearfix">
                        <img src="../../小黑子/01.jpg" alt="" class="sma">
                        <a href="">住在手机里的朋友</a><br>
                        <img src="../../小黑子/lanmbq.png" alt="">
                        <span class="sma1">个人博客</span>
                        <img src="../../小黑子/datepng.png" alt="">
                        <span class="sma2">2014-02-19</span>
                    </div>
                </div>
                <!-- 广告 -->
                <div class="ad2">
                    <img src="../../小黑子/03.jpg" alt=""><br>
                     <!-- 友情链接 -->
                <div class="friend">
                    <span >友情链接</span>
                    <a href="" frilink>[申请友情链接]</a>
                </div>
                <div class="fl1"> 
                    <a href="">前端设计</a>
                    <a href=""> HTML</a>
                    <a href="">CSS3</a>
                    <a href="">HTML5+CSS3</a>
                    <a href="">百度</a>
                    <a href="">javascript</a>
                    <a href="">个人博客</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>